
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%-- 导入面包屑 --%>
<jsp:include page="../common/nav.jsp"></jsp:include>

<div class="wrapper wrapper-content animated fadeInRight">

	<%-- 导入提示信息框 --%>
    <c:if test="${hint!=null&&hint!=''}">
   		<jsp:include page="../common/alert/alert.jsp">
   			<jsp:param value="${hint}" name="alertType"/>
   			<jsp:param value="${alertMessage}" name="alertMessage"/>
   		</jsp:include>
    </c:if>

	<div class="row">
		<form id="editForm" method="post" action="web/gLJeModelHead/editGLJeModelHead">
		<div class="col-lg-12">
			<div class="ibox ">
				<div class="ibox-title" style="text-align: right; padding-right: 15px; padding-bottom: 15px;">
					<button class="btn btn-white btn-lg" type="button" onclick="window.location.href='web/gLJeModelHead/getGLJeModelHeadList'">返回</button>&nbsp;
					<button class="ladda-button ladda-button-demo btn btn-primary btn-lg" data-style="expand-right">&nbsp;&nbsp;日记账模板保存&nbsp;&nbsp;<i class="fa fa-check-square-o"></i></button>
				</div>

				<div class="ibox-content">
					<div class="text-center">
						<h2>
							<strong>日记账模板</strong>
						</h2>
					</div>
					
						
						<div class="form-group row">
							<label class="col-sm-1 col-form-label"><span class="text-danger">*</span><strong>模板编码</strong></label>
	                        <div class="col-sm-3">
								<input id="jeHeadCode" name="jeHeadCode" type="text" class="form-control" value="${requestScope.gLJeModelHead.jeHeadCode}">
	                        </div>
	                        
	                        <label class="col-sm-1 col-form-label"><span class="text-danger">*</span><strong>模板名称</strong></label>
	                        <div class="col-sm-3">
								<input id="jeName" name="jeName" type="text" class="form-control" value="${requestScope.gLJeModelHead.jeName}">
	                        </div>
	                        
	                        <label class="col-sm-1 col-form-label"><span class="text-danger">*</span><strong>分类账簿</strong></label>
	                        <div class="col-sm-3">
								<select class="form-control" name="ledgerCode" id="ledgerCode">
		                        	<option value="" selected="selected">请选择...</option>
		                        	<option value="${requestScope.glLedger.ledgerCode}">${requestScope.glLedger.ledgerName}</option>
		                        </select>
	                        </div>
	                    </div>
	                    
	                    <div class="form-group row" style="margin-bottom: 0px;">
							<label class="col-sm-1 col-form-label"><strong>模板描述</strong></label>
	                        <div class="col-sm-7">
								<input id="jeDesc" name="jeDesc" type="text" class="form-control" value="${requestScope.gLJeModelHead.jeDesc}">
	                        </div>
	                        
	                        <label class="col-sm-1 col-form-label"><span class="text-danger">*</span><strong>状态</strong></label>
	                        <div class="col-sm-3">
								<select class="form-control" name="status" id="status">
		                        	<option value="Y">有效</option>
		                        	<option value="N">无效</option>
		                        </select>
	                        </div>
	                    </div>
	                    <div class="hr-line-dashed" style="margin-top: 10px; margin-bottom: 10px;"></div>
	                    
	                    

						<div class="form-group row" style="margin-bottom: 0px;">
							<div class="table-responsive">
								<table class="table table-hover" style="border: 2px solid; font-weight: bold; margin-bottom: 5px;" border="2">
									<thead>
									</thead>
									<tbody>
										<tr>
											<th width="30%" class="text-center" rowspan="2" style="vertical-align: middle;">摘要</th>
											<th width="30%" class="text-center" rowspan="2" style="vertical-align: middle;">会计科目</th>
											<th width="20%" class="text-center" colspan="11">借方金额</th>
											<th width="20%" class="text-center" colspan="11">贷方金额</th>
										</tr>
										<tr style="font-size: 11px; font-weight: normal;">
											<td>亿</td>
											<td>千</td>
											<td>百</td>
											<td>十</td>
											<td>万</td>
											<td>千</td>
											<td>百</td>
											<td>十</td>
											<td>元</td>
											<td style="color: silver;">角</td>
											<td style="color: silver;">分</td>
											<td>亿</td>
											<td>千</td>
											<td>百</td>
											<td>十</td>
											<td>万</td>
											<td>千</td>
											<td>百</td>
											<td>十</td>
											<td>元</td>
											<td style="color: silver;">角</td>
											<td style="color: silver;">分</td>
										</tr>
										
										<c:forEach items="${requestScope.glJeModelLineList}" var="data" varStatus="dataStatus">
										<tr class="dataTr">
											<td>
												<div class="addDiv" style="position: absolute; margin-left: 0px; margin-top: -28px; cursor: pointer; display: none;"><i class="fa fa-plus-circle fa-lg" title="添加行"></i></div>
												<div class="removeDiv" style="position: absolute; margin-left: 0px; margin-top: -7px; cursor: pointer; display: none;"><i class="fa fa-minus-circle fa-lg" title="删除行"></i></div>
												<input name="jeLineId" type="hidden" value="${data.jeLineId}">
												<input name="memo" type="text" class="form-control" value="${data.memo}">
											</td>
											<td>
												<input name="subjectDesc" type="text" class="form-control" value="${data.subjectDesc}" title="${data.subjectDescTitle}">
												<span class="subjectDescTitle" style="font-size: 10px; color: silver; font-weight: normal;">${data.subjectDescTitle}</span>
												<input name="subjectCode" type="hidden" class="form-control" value="${data.subjectCode}">
											</td>
											
											<c:forEach items="${data.drAmountArray}" var="dr" varStatus="status">
												<c:choose>
													<c:when test="${status.count==1}">
														<td style="font-size: 17px;">${dr}
															<div class="drDiv" style="position: absolute; margin-left: 8px;">
																<input name="drAmount" type="text" class="form-control drAmount" value="${data.drAmount}" style="width: 150%;">
																
																<select class="form-control drAmountSelect" name="drAmount" style="width: 250%;">
											                    	<option value="" selected="selected">无</option>
											                    	<option value="AMOUNT" selected="selected">金额</option>
											                    </select>	
															</div>
														</td>
													</c:when>
													<c:when test="${status.count==10||status.count==11}">
														<td style="vertical-align: middle; color: silver; font-size: 12px;">${dr}</td>
													</c:when>
													<c:otherwise>
														<td style="vertical-align: middle; font-size: 17px;">${dr}</td>
													</c:otherwise>
												</c:choose>
											</c:forEach>
											
											
											<c:forEach items="${data.crAmountArray}" var="cr" varStatus="status">
												<c:choose>
													<c:when test="${status.count==1}">
														<td style="font-size: 17px;">${cr}
															<div class="crDiv" style="position: absolute; margin-left: 8px;">
																<input name="crAmount" type="text" class="form-control crAmount" value="${data.crAmount}" style="width: 150%;">
															
																<select class="form-control crAmountSelect" name="crAmount" style="width: 250%;">
											                    	<option value="" selected="selected">无</option>
											                    	<option value="AMOUNT" selected="selected">金额</option>
											                    </select>	
															</div>
														</td>
													</c:when>
													<c:when test="${status.count==10||status.count==11}">
														<td style="vertical-align: middle; color: silver; font-size: 12px;">${cr}</td>
													</c:when>
													<c:otherwise>
														<td style="vertical-align: middle; font-size: 17px;">${cr}</td>
													</c:otherwise>
												</c:choose>
											</c:forEach>
											
											
										</tr>
										
										<script>
										//初始化金额
										$(".drAmountSelect").eq(${dataStatus.index}).val("${data.drAmount}");
										$(".crAmountSelect").eq(${dataStatus.index}).val("${data.crAmount}");
										</script>
										
										</c:forEach>
										
										<tr id="emptyTr">
											<td style="height: 36px;">
												<div class="addDiv" style="position: absolute; margin-left: 0px; margin-top: 2px; cursor: pointer; display: none;"><i class="fa fa-plus-circle fa-lg" title="添加行"></i></div>
												<div class="removeDiv" style="position: absolute; margin-left: 0px; margin-top: 18px; cursor: pointer; display: none;"><i class="fa fa-minus-circle fa-lg" title="删除行"></i></div>
											</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
										</tr>
										<tr id="sumTr">
											<td colspan="2">合计：&nbsp;&nbsp;${requestScope.gLJeModelHead.amountDesc}</td>
											
											<c:forEach items="${requestScope.gLJeModelHead.drAmountArray}" var="amount" varStatus="status">
												<c:choose>
													<c:when test="${status.count==1}">
														<td style="vertical-align: middle; font-size: 17px;">${amount}</td>
													</c:when>
													<c:when test="${status.count==10||status.count==11}">
														<td style="vertical-align: middle; color: silver; font-size: 12px;">${amount}</td>
													</c:when>
													<c:otherwise>
														<td style="vertical-align: middle; font-size: 17px;">${amount}</td>
													</c:otherwise>
												</c:choose>
											</c:forEach>
											
											<c:forEach items="${requestScope.gLJeModelHead.crAmountArray}" var="amount" varStatus="status">
												<c:choose>
													<c:when test="${status.count==1}">
														<td style="vertical-align: middle; font-size: 17px;">${amount}</td>
													</c:when>
													<c:when test="${status.count==10||status.count==11}">
														<td style="vertical-align: middle; color: silver; font-size: 12px;">${amount}</td>
													</c:when>
													<c:otherwise>
														<td style="vertical-align: middle; font-size: 17px;">${amount}</td>
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</tr>
									</tbody>
									<tfoot>
									</tfoot>
								</table>
							</div>
						</div>

						<div class="form-group row" style="margin-bottom: 0px;">
							<div class="col-sm-4">制单人： ${requestScope.gLJeModelHead.staffName}</div>
						</div>
						
						
				</div>
			</div>
		</div>
		
			<input type="hidden" name="jeHeadId" value="${requestScope.gLJeModelHead.jeHeadId}">
			<input type="hidden" name="staffCode" value="${requestScope.gLJeModelHead.staffCode}">
			<input type="hidden" name="departmentCode" value="${requestScope.gLJeModelHead.departmentCode}">
			<input type="hidden" name="createdDate" value="${requestScope.gLJeModelHead.createdDate}">
			<input type="hidden" name="createdBy" value="${requestScope.gLJeModelHead.createdBy}">
		</form>
	</div>
</div>

<div id="glSubjectDiv"></div>

<script>
	var selectSubjectInput;
	$(document).ready(function() {
		//初始化ledgerCode
		if("${requestScope.gLJeModelHead.ledgerCode}"!=""){
			$("#ledgerCode").val("${requestScope.gLJeModelHead.ledgerCode}");
		}
		//初始化status
		if("${requestScope.gLJeModelHead.status}"!=""){
			$("#status").val("${requestScope.gLJeModelHead.status}");
		}
		//初始化jeHeadCode只读
		if("${requestScope.gLJeModelHead.jeHeadCode}"!=""){
			$("#jeHeadCode").prop("readonly", true);
		}
		
		//设置汇总金额
		/*
		var sumFlag = "N";
		$("#sumTr").find("td").each(function(i){
			if(i>0){
				sumFlag = "N";
				var index = i+1;
				var sum = 0;
				$("tr").each(function(n){
					if(n>1&&n<$("tr").length-2){
						var num = $(this).find("td:eq("+index+")").text();
						if($.isNumeric(num)){
							sum = sum + parseFloat(num);
							sumFlag = "Y";
						}
					}
				});
				
				if(sumFlag=="Y"){
					$(this).text(sum);
				}
			}
		});
		*/
	
		//设置tr的默认鼠标放上及移出的效果
		$("tr").each(function(i){
			if(i>1&&i<$("tr").length-2){
				//移除行效果
				$(this).on("mouseover",function(){
					$(this).find(".removeDiv").show();
				});
				
				$(this).on("mouseleave",function(){
					$(this).find(".removeDiv").hide();
				});
			
				//金额效果
				/*
				$(this).find("td").each(function(n){
					if(n>1&&n<=12){
						$(this).attr("title","点击编辑");
						$(this).on("click",function(){
							$(this).parent().find(".drDiv").show();
						});
					}else if(n>12){
						$(this).attr("title","点击编辑");
						$(this).on("click",function(){
							$(this).parent().find(".crDiv").show();
						});
					}
				});
				*/
			}else if(i==$("tr").length-2){
				//添加行效果
				$(this).on("mouseover",function(){
					$(this).find(".addDiv").show();
				});
				
				$(this).on("mouseleave",function(){
					$(this).find(".addDiv").hide();
				});
			}
		});
		
		//添加行
		$(".addDiv").click(function(){
			$.ajax({
				type: "post",
				url: "web/gLJeHead/getTrModelAjax",
				//data: {"payHeadCode": code},
				async: false,
				dataType: "html",
				cache: false,
				success: function(data){
					if(data!=""){
						$("#emptyTr").before(data);
						//初始化默认执行
						setBusinessType();
					}
				},
				error: function(XMLHttpRequest, textStatus, errorThrown){
					redragonJS.alert(textStatus);
				}
			});
		});
		
		//如果没有凭证行，默认添加两行
		if($("tr").length==4){
			$(".addDiv").click();
			$(".addDiv").click();
		}
		
		//移除行
		$(".removeDiv").click(function(){
			var tempObj = $(this);
			redragonJS.confirm("确认删除行？", function(){
				if(tempObj.parent("td").parent("tr").find("input[name='jeLineId']").val()==""){
					tempObj.parent("td").parent("tr").remove();
					redragonJS.close();
				}else{
					var id = tempObj.parent("td").parent("tr").find("input[name='jeLineId']").val();
					window.location.href = "web/gLJeModelLine/deleteGLJeModelLine?jeHeadId=${param.jeHeadId}&jeHeadCode=${param.jeHeadCode}&jeLineId="+id;
				}
				
			});
		});
		
		//科目选择框
		$("input[name='subjectDesc']").focus(function(){
			selectSubjectInput = $(this);
			initCOA($(this));
		});
		
		//初始化默认执行(业务类型)
		setBusinessType();
		
		function setBusinessType(){
			//设置金额不显示
			$("input[name='drAmount']").val("");
			$("input[name='drAmount']").attr("readonly", true);
			$("input[name='drAmount']").attr("placeholder","手工输入");
			$("input[name='crAmount']").val("");
			$("input[name='crAmount']").attr("readonly", true);
			$("input[name='crAmount']").attr("placeholder","手工输入");
			//设置不同情况下的金额效果
			$(".drAmountSelect").prop("disabled", true);
			$(".crAmountSelect").prop("disabled", true);
			$(".drAmountSelect").hide();
			$(".crAmountSelect").hide();
			
			$(".drAmount").prop("disabled", false);
			$(".crAmount").prop("disabled", false);
			$(".drAmount").show();
			$(".crAmount").show();
		}
		
		
		
		//form处理
		var l = $('.ladda-button-demo').ladda();

		l.click(function() {
			$("#editForm").valid();
			//l.ladda('stop');
		});

		$("#editForm").validate({
			rules : {
				jeHeadCode : {
					required : true,
				},
				jeName : {
					required : true,
				},
				ledgerCode : {
					required : true,
				},
			},
			submitHandler: function(form) {
				var sumitFlag = 'Y';
			
				//验证凭证行字段
				$("input[name='memo']").each(function(){
					if($.trim($(this).val())==""){
						sumitFlag = "N";
						redragonJS.alert("摘要不能为空");	
						return false;
					}
				});
				
				$("input[name='subjectCode']").each(function(){
					if($.trim($(this).val())==""){
						sumitFlag = "N";
						redragonJS.alert("科目不能为空");	
						return false;
					}
				});
				
				if($("tr.dataTr").length<2){
					sumitFlag = "N";
					redragonJS.alert("日记账模板行必须超过两行");
					return false;
				}
				
				//提交表单
				if(sumitFlag=="Y"){
					l.ladda('start');
		        	form.submit();
				}
				
		    }
		});
	});
	
	
	//初始化COA
	function initCOA(obj){
		var subjectCode = $(obj).parent().find("input[name='subjectCode']").val();
		$.ajax({
			type: "post",
			url: "web/gLCodeCombinations/initCOA",
			data: {"subjectCode": subjectCode},
			async: false,
			dataType: "html",
			cache: false,
			success: function(data){
				if(data!=""){
					$("#glSubjectDiv").html(data);
					$('#coaDiv').modal('show');
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				redragonJS.alert(errorThrown);
			}
		});
	}
</script>